<template>
    <fieldset>
        <legend>{{isLogin?"内容界面":"登录界面"}}</legend>
        <div class="content" v-if='isLogin'>
            <h1>列表展示</h1>
            <button @click='isLogin=false'>点击回退</button>&nbsp;
            <button @click='getList'>点击获取列表数据</button>
            <h2>
                <img :src="userInfo.headimgurl" alt="" width="40">
                昵称:
                <a href="">{{userInfo.nickname}}</a>
            </h2>
            <ul>
                <li v-for="item in lists" :key='item._id'>
                    <b>{{item.name}}</b>
                    <button v-has:read='permissionBtns'>查看</button>
                    <button v-has:edit='permissionBtns'>修改</button>
                    <button v-has:delete='permissionBtns'>删除</button>
                    <button v-has:add='permissionBtns'>增加</button>
                </li>
            </ul>
        </div>
        <div class="login" v-else>
            <h1>请填写用户信息</h1>
            <label for="username">用户名: </label>
            <input type="text" id="username" v-model='username'>
            <br>
            <label for="password"> &nbsp;&nbsp; 密码: </label>
            <input type="password" v-model='password' @keydown.enter='login'>
            <br>
            <button @click='login'>登录</button>
        </div>
    </fieldset> 
</template> 
<script>
    import conten from '../../assets/assist'//不理解为什么在Vue中非要引用一个空组件呢？不然会报错
    const loginApi =(params = {}) =>{             
        return fetch('http://chst.vip/users/login',{
            method:'post',
            headers:{
                'content-type':'application/json'
            },
            body: JSON.stringify(params)
        })
        .then(body=>body.json())
        .catch(err=>err.toString())
    }
    const getListApi = ()=>{
        return fetch('http://chst.vip/students/getstulist?count=5',{
            headers:{
                'authorization':sessionStorage.getItem('user-token')
            }
        })
        .then(body=>body.json())
        .catch(err=>err.toString(s))
    }
    export default{
        data(){
            return {
                isLogin:false,
                username:'',
                password:'', 
                userInfo:{},
                lists:[],
                permissionBtns:[]
            }
        },
        directives: {
            has:{
                inserted(el,binding){
                    console.log(binding);
                    // el.disabled = true
                    let role = binding.arg;
                    let userRole = binding.value;
                    let hasRole = userRole.includes(role);
                    if(!hasRole){
                    // el.disabled = true
                        el.parentNode.removeChild(el)
                    }
                }
            }
        },
        methods: {
            async login(){
                let res = await loginApi({username:this.username,password:this.password})
                console.log(res)

                if(res.state){
                    this.isLogin = true
                    this.userInfo = res.userInfo
                    //用户的令牌存本地
                    sessionStorage.setItem('user-token',res.token)
                    //赋值给permissionBtns
                    this.permissionBtns =  res.permission.buttons
                    this.getList()
                }else{
                    alert(res.msg)
                }
            },
            async getList(){
                let res = await getListApi()
                if(res.state){
                    this.lists = res.data 
                }else{
                    alert(res.msg)
                }
            },
        },
        components:{
            conten,
        }
    }
</script>
<style>
    ul{
        list-style: none;
    }
    input{
        margin-bottom: 10px;
    }
</style>